<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="/js/echarts.common.min.js"></script>
    <script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
    <title></title>
</head>
<body>
<div id="main" style="width: 1000px;height: 700px;margin: auto;"></div>
<script>
    $(function () {
		queryDeptBySalary();
    });

    function queryDeptBySalary() {
		var app = echarts.init(document.getElementById("main"))
		option = {
			title: {
				text: '各部门薪资',
				left: 'center'
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				left: 'left'
			},
			series: [
				{
					name: '薪资',
					type: 'pie',
					radius: '50%',
					data: [],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		};
	/*	var obj = [
			{
				name: "人事部",
				value: 10000,
			},
			{
				name: "研发部",
				value: 12000,
			},
			{
				name: "管理部",
				value: 11000,
			},
			{
				name: "保安部",
				value: 9000,
			},
			{
				name: "技术部",
				value: 15000,
			},
		];//用来存储迟到和早退的情况*/
		$.ajax({
			url: "/echarts/queryDeptBySalary",
			type:"get",
			dataType:"json",
			success: function (data) {
				console.log(data.data);
				const obj = data.data;

				var arr = [];
				for (var i = 0; i < obj.length; i++) {
					var c = {value: obj[i].value, name: obj[i].name};
					arr.push(c);
				}
				option.series[0].data = arr;
				app.setOption(option);
			},
			error:function (err) {
				alert(JSON.stringify(err));
			}
		});
		app.setOption(option);
		//调用echarts的setOption方法来让图标生效
		window.addEventListener("resize",function(){
			app.resize();
		});
    }


</script>
</body>
</html>
